<!DOCTYPE html>
<html>

<head>
    <title>管理员登录·车队管理系统</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/css/element.css">
    <link rel="stylesheet" href="/static/css/StartAdmin.css">
    <style>

        body {
            overflow:scroll;
            overflow-y:hidden;
            overflow-x:hidden;
        }
        .login {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            left: 10%;

            top: 0;
            bottom: 0;
        }

        .login-box {
            width: 400px;
        }
        /* 页脚 */
        footer {
            position: fixed;
            background-color: rgba(43, 166, 166, 0.5);
            color: #1be369;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            height: 20px;
            line-height: 20px;
        }
    </style>
</head>

<body>
<div id="app" v-cloak>
    <div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
        <img src="/static/images/bg1.jpg" width="100%"  />
    </div>
    <div class="login">
        <el-card class="box-card login-box" shadow="never">
            <div slot="header" class="clearfix">
                <span>车队管理系统·管理员登录</span>
            </div>
            <div class="text item">
                <el-form ref="form" :model="form">
                    <el-form-item>
                        <el-input v-model="form.user_account" placeholder="请输入你的帐号"
                                  prefix-icon="el-icon-mobile-phone" clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.user_password" placeholder="请输入你的密码" prefix-icon="el-icon-lock"
                                  show-password></el-input>
                    </el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="onSubmit">登录帐号</el-button>
                    </div>
                </el-form>
            </div>
        </el-card>
    </div>
</div>
<footer>Copyright (C) 车辆定位跟踪系统 技术支持:CQU_hhy 2020-2021, All Rights Reserved</footer>
</body>
<script src="/static/js/vue-2.6.10.min.js"></script>
<script src="/static/js/axios.min.js"></script>
<script src="/static/js/element.js"></script>
<script src="/static/js/StartAdmin.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    user_account: "",
                    user_password: ""
                }
            }
        },
        methods: {
            onSubmit() {
                var that = this;
                axios.post('user/login', Object.assign({}, PostBase, that.form))
                .then(function (response)
                {
                    if (response.data.code == 200) {
                        that.$message({
                            message: '登录成功,正在跳转中',
                            type: 'success'
                        });
                        setTimeout(function () {
                            location.replace('');
                        }, 1000)
                    } else {
                        that.$message.error(response.data.msg);
                    }
                })
                .catch(function (error)
                {
                    that.$message.error('登录失败，服务器内部错误');
                })
                ;

            }
        }
    })
</script>

</html>